<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Html素材</title>

  <link href="styles.css" rel="stylesheet" type="text/css">
  <script>
    var isMsDown = false;
    function onMsDown(e, obj) {
      var ctx= obj.getContext("2d");
      ctx.beginPath();
      downX = e.offsetX;
      downY = e.offsetY;
      ctx.moveTo(e.offsetX, e.offsetY);
      isMsDown = true;
      console.log(`action down x=${e.offsetX}, y=${e.offsetY}`);
    }

    function onMsMove(e, ojb) {
      if (!isMsDown) {
        console.log(`action invalid`);
        return;
      }


      var x=e.offsetX;
      var y=e.offsetY;

      ctx.strokeStyle = 'red';
      ctx.lineTo(x, y);
      ctx.stroke();
    }

    function onMsUp(e) {
      isMsDown = false;
    }

    function clearCanvas() {
      isMsDown = false;
      var ctx = document.getElementById("myCanvas").getContext("2d");
      ctx.clearRect(0,0,1000,100);
    }

  </script>
</head>
<body>
<div class="main-content">
  <p>
    <a name="anchorTop">一、初识HTML文档格式</a>>
  </p>
  <p>
    创建一个HTML5文档 会有如下模板
  </p>
  <pre class="code">
&lt;!--告知浏览器需要遵循什么规范，这里是HTML5--&gt;
&lt;!DOCTYPE html&gt;
&lt;! 网页语言 --&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;! 网页头部，定义css js 等 --&gt;
&lt;head&gt;
    &lt;! 字符编码格式，这里是utf-8 --&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;! 网页标题，显示在浏览器窗口上 --&gt;
    &lt;title&gt;title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;! 页面内容 --&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
  <p>HTML是标记语言，用尖括号中的不同标记来确定文本的格式，这样网页上能展示丰富的界面</p>

  <p>
    二、常用的标签
  </p>
  <p>1、换行标签&lt;br /&gt;。只需要在文本中嵌入这个标签即可换行</p>
  <pre class="code">
第一行&lt;br /&gt;第二行</pre>
  <p>2、&lt;h1&gt;&lt;/h1&gt;标题标签</p>
  <pre class="code">
&lt;h1 &gt;xxx文字&lt;/h1&gt;
&lt;h2 &gt;xxx文字&lt;/h2&gt;
&lt;h3 &gt;xxx文字&lt;/h3&gt;</pre>
  <div class="code-show">
    <h1>xxx文字</h1>
    <h2>xxx文字</h2>
    <h3>xxx文字</h3>
  </div>

  <p>3、段落标签&lt;p&gt;&lt;/p&gt;，可通过align属性设置内容的位置</p>
  <pre class="code">
&lt;p align="center"&gt;xxx文字&lt;/p&gt;</pre>
  <div class="code-show">
    <p align="center">xxx文字</p>
  </div>

  <p>4、常用文本字体样式标签</p>
  <pre class="code">
&lt;b&gt;粗体文本&lt;/b&gt;
&lt;i&gt;斜体文本&lt;/i&gt;
&lt;del&gt;删除线&lt;/del&gt;
&lt;sup&gt;上标题&lt;/sup&gt;
&lt;sub&gt;下标题&lt;/sub&gt;</pre>
  <div class="code-show">
    <b>粗体文本</b><br/>
    <i>斜体文本</i><br/>
    <del>删除线</del>
    <br/>
    <span>正常文字<sup>上标题</sup></span><br/>
    <span>正常文字<sub>下标题</sub></span><br/>
  </div>
  <p>5、超链接</p>
  <p>&lt;a&gt; &lt/a&gt;定义超链接，主要用到href属性标示链接地址，title标示链接的提示信息， target定义链接的打开方式，标签内容可以是文字，
    也可以是图片或者其他内联标签。属性值包括:_blank（空白页）、_self（默认）、_top（当前页）。a标签也可以使用name定义锚点，
    用#+锚点实现本页中位置跳转。/p>
  <pre class="code">
&lt;a href="https://www.galaxywind.com" title="银河风云" target="_blank"&gt;银河风云（空白页打开） &lt;/a&gt;&lt;br /&gt;
&lt;a name="anchorTop&gt;这是一个锚点&lt;/a&gt;&lt;br /&gt;
&lt;a href="#anchorTop" title="锚点" target="_self"&gt;回到顶部&lt;/a&gt;</pre>
  <div class="code-show">
    <a href="https://www.galaxywind.com" title="银河风云" target="_blank">银河风云（空白页打开）</a><br/>
    <a href="https://www.galaxywind.com" title="银河风云" target="_self">银河风云（当前页打开）</a><br/>
    <a href="#anchorTop" title="锚点" target="_self">回到顶部</a><br/>
    <a href="https://www.galaxywind.com" target="_blank">
      <img src="../../assets/logo.png" alt="logo" width="171" height="24" style="background: black">
    </a>
  </div>

  <p>6、图像标签&lt;img /&gt;，关键属性src，指定图片url，width、height指定图片尺寸，alt指定图片位置替换的文字（当图片
    显示失败的时候展示）</p>
  <p>图像标签还支持使用&lt;map&gt; &lt;/map&gt;映射图像中点击区域及动作</p>
  <pre class="code">
&lt;img src="../../assets/logo.png" width="100" height="50" usemap="#test-map"/&gt;
&lt;map id="test-map" name="test-map"&gt;
  &lt;area shape="circle" coords="150, 150, 50" href="https://www.galaxywind.com" alt="银河风云" target="_blank"&gt;
&lt;/map&gt;
&lt;img src="../../assets/logo1.png" width="100" height="50" alt="不存在的图片"/&gt;</pre>
  <div class="code-show">
    <img src="../../assets/logo.png" width="300" height="300" usemap="#test-map"/>
    <map id="test-map" name="test-map">
      <area shape="circle" coords="150, 150, 50" href="https://www.galaxywind.com" alt="银河风云" target="_blank">
    </map>
    <img src="../../assets/logo1.png" width="100" height="50" alt="不存在的图片"/>
  </div>
  <p>7、列表</p>
  <p>列表标签分为无序列表&lt;ul&gt; &lt;/ul&gt;、有序列表&lt;ol&gt; &lt;/ol&gt;、自定义列表&lt;dl&gt;&lt;/dl&gt;</p>
  <div class="code-show">
    <ul type="circle">
      <li>无序列表条目1</li>
      <li>无序列表条目2</li>
      <li>无序列表条目3</li>
    </ul>

    <ol type="a" start="1">
      <li>无序列表条目1</li>
      <li>无序列表条目2</li>
      <li>无序列表条目3</li>
    </ol>

    <dl>
      <dt>早餐</dt>
      <dd>豆浆</dd>
      <dd>油条</dd>
      <dt>午餐</dt>
      <dd>鱼香肉丝</dd>
      <dd>大米饭</dd>
    </dl>

  </div>

  <p>
    特殊字符表示方式
  </p>
  <div class="code-show">
    <p>&gt;（大于符号） &amp;gt;</p>
    <p>&lt;（小雨符号） &amp;lt;</p>
    <p>&nbsp;（空格） &amp;nbsp;</p>
  </div>

  <p>8、表格</p>
  <p>
    表格由&lt;table&gt;标签以及一个或多个 tr、th或td 元素组成。<br/>
    单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  </p>
  <div class="code-show">
    <table border="1px">
      <tr>
        <td>1行 1列</td>
        <td>1行 2列</td>
      </tr>
      <tr>
        <td>2行 1列</td>
        <td>2行 2列</td>
      </tr>
    </table>
  </div>
  <!--<p>内嵌框架，使用&lt;iframe&gt;&lt;/iframe&gt;引入其他网页</p>

  <div class="code-show">
    <iframe src="https://www.galaxywind.com" name="银河风云" height="200px" width="100%"></iframe>
  </div>-->

  <p>三、表单</p>
  <p>表单标签&lt;form&gt; &lt;/form&gt;，需要结合&lt;input&gt;使用，以下列举常用标签</p>
  <div class="code-show">
    <form>
      输入框<br/>
      账号<input type="text" name="username"/><br/>
      密码<input type="password" name="pwd"/><br/>
    </form>
    <form>
      单选框<br/>
      <input type="radio" name="r1" value="r1"/>true<br/>
      <input type="radio" name="r2" value="r2"/>false<br/>
    </form>
    <form>
      复选框<br/>
      <input type="checkbox" name="c1" value="c1"/>style1<br/>
      <input type="checkbox" name="c2" value="c2"/>style2<br/>
      提交按钮<br/>
      <input type="submit" name="s1" value="提交"/><br/>
      上传文件<br/>
      <input type="file" name="f1" value="选择文件"/><br/>
      下拉选择框<br/>
      <select name="area">
        <option value="a1">四川</option>
        <option value="a2">北京</option>
        <option value="a3">上海</option>
      </select>
    </form>
  </div>
  <p>四、H5的一些特性</p>
  <p>1、多媒体</p>
  <div class="code-show">
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
      Your browser does not support the audio element.
    </audio>
    <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
      your browser does not support the video tag
    </video>
  </div>
  <p>2、画布 Canvas</p>
  <p>Canvas是使用JavaScript在网页上绘制图形，&lt;canvas&gt;&lt;/canvas&gt;定义一块区域</p>
  <div class="code-show">
    <canvas id="myCanvas" width="1000px" height="100px" style="border: solid coral 1px" onmousemove="onMsMove(event, this)"
            onmousedown="onMsDown(event, this)" onmouseup="onMsUp(event)"></canvas>
    <input type="button" value="清除" onclick="clearCanvas()">
  </div>


  <p>参考资料</p>
  <div class="code-show">
    <p>html基础 <a href="https://www.w3school.com.cn/h.asp" target="_blank">https://www.w3school.com.cn/h.asp</a></p>
    <p>html标签 <a href="https://www.w3school.com.cn/tags/tag_comment.asp" target="_blank">https://www.w3school.com.cn/tags/tag_comment.asp</a></p>
  </div>
</div>

</body>
</html>

